<template>
  <div class="app-container">
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">考评结果名单</span>
    </div>
    <el-form ref="form" :model="form" label-width="160px"
             style="margin-left: 25%;">
      <el-form-item :label="'优秀人员（'+(form.excellentPersonScale?form.excellentPersonScale+'%':'未设置')+'）'"
                    prop="excellentPersonIds">
        <el-row>
          <el-col :span="16">
            <div class="draggable">
              <draggable :disabled="isDisabled" group="site" animation="300"
                         dragClass="dragClass"
                         ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd">
                <transition-group class="draggable_area">
                  <div class="u-player" v-for="item in form.excellentPersonList" :key="item.userId">{{ item.userName }}</div>
                </transition-group>
              </draggable>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="'良好人员（'+(form.goodPersonScale?form.goodPersonScale+'%':'未设置')+'）'" prop="goodPersonIds">
        <el-row>
          <el-col :span="16">
            <div class="draggable">
              <draggable :disabled="isDisabled" group="site" animation="300"
                         dragClass="dragClass"
                         ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd">
                <transition-group class="draggable_area">
                  <div class="u-player" v-for="item in form.goodPersonList" :key="item.userId">{{ item.userName }}</div>
                </transition-group>
              </draggable>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="'称职人员（'+(form.qualifiedPersonScale?form.qualifiedPersonScale+'%':'未设置')+'）'"
                    prop="qualifiedPersonIds">
        <el-row>
          <el-col :span="16">
            <div class="draggable">
              <draggable :disabled="isDisabled" group="site" animation="300"
                         dragClass="dragClass"
                         ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd">
                <transition-group class="draggable_area">
                  <div class="u-player" v-for="item in form.qualifiedPersonList" :key="item.userId">{{ item.userName }}</div>
                </transition-group>
              </draggable>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="'基本称职人员（'+(form.almostPersonScale?form.almostPersonScale+'%':'未设置')+'）'"
                    prop="almostPersonIds">
        <el-row>
          <el-col :span="16">
            <div class="draggable">
              <draggable :disabled="isDisabled" group="site" animation="300"
                         dragClass="dragClass"
                         ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd">
                <transition-group class="draggable_area">
                  <div class="u-player" v-for="item in form.almostPersonList" :key="item.userId">{{ item.userName }}</div>
                </transition-group>
              </draggable>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="'不称职人员（'+(form.unqualifiedPersonScale?form.unqualifiedPersonScale+'%':'未设置')+'）'"
                    prop="unqualifiedPersonIds">
        <el-row>
          <el-col :span="16">
            <div class="draggable">
              <draggable :disabled="isDisabled" group="site" animation="300"
                         dragClass="dragClass"
                         ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd">
                <transition-group class="draggable_area">
                  <div class="u-player" v-for="item in form.unqualifiedPersonList" :key="item.userId">{{ item.userName }}
                  </div>
                </transition-group>
              </draggable>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {getTask} from "@/api/examine/task/api";

export default {
  name: "examinePersonRuleForm",
  components: {
    draggable
  },
  props: {
    pageForm: Object
  },
  watch: {
    pageForm: {
      immediate: true,
      handler: function (val) {
        this.form = val
      }
    }
  },
  data() {
    return {
      isDisabled: true,
      form: {}
    }
  },
  methods: {
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.draggable {
  width: 600px;
  height: 150px;
  border: solid 1px #eee;
  border-radius: 5px;

  .u-player {
    margin-top: 10px;
    margin-left: 10px;
    display: inline-block;
    color: #0079DD;
    background: #F0F7FD;
    font-size: 14px;
    font-weight: 400;
    padding: 0 2px 0 2px;
    border-radius: 6px;
    cursor: move;

    &:not(:last-child) {
      //margin-right: 16px;
    }
  }
}

// 拖拽默认空间
.draggable_area {
  min-height: 120px;
  display: block;
}

.chosen { // 选择元素的样式
  background: #666 !important;
  color: #fff !important;
}

.ghost { // 目标位置占位符的样式及需要停靠位置的样式
  background: #1890FF !important;
}

</style>
